<template>
  <div class="context">

    <template>
      <el-tabs  v-model="activeName" @tab-click="handleClick">

        <el-tab-pane label="待审核" name="first">
          <el-table v-model="waitcheck" :data="waitcheck" style="width: 100%" height="450px">
            <el-table-column type="index" width="50">
            </el-table-column>
            <!-- <el-table-column label="ID">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->
            <el-table-column label="提现用户">
              <template slot-scope="scope">
                <span>{{ scope.row.iphone }}</span>
              </template>
            </el-table-column>

            <el-table-column label="vip到期时间">
              <template slot-scope="scope">
                <span v-show="scope.row.vip!=0">{{timestampToTime(scope.row.vip) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现金额">
              <template slot-scope="scope">
                <span>{{ scope.row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column label="备注信息">
              <template slot-scope="scope">
                <span>{{ scope.row.info }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现日期">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>

                    <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.status }}</span> -->
            <el-tag v-if="scope.row.status==0">待审核</el-tag>
           <el-tag type="success" v-if="scope.row.status==1">已打款</el-tag>
           <el-tag type="danger" v-if="scope.row.status==2">拒绝申请</el-tag>
          </template>
        </el-table-column>

            <el-table-column label="操作" width="300">

              <template slot-scope="scope">
                <!-- <el-button type="text" @click="looknote(scope.$index, scope.row)" size="small">查看</el-button> -->
                <el-button type="text"  @click="showCashRecord(scope.row)" size="small">提现明细</el-button>
                <el-button type="text"  @click="showDetailMoney(scope.row)" size="small">收益明细</el-button>
                <el-button type="text"  @click="changeRecord(scope.$index, scope.row,1)" size="small">打款</el-button>
                <el-button type="text"  @click="open(scope.$index, scope.row,2)" size="small">驳回申请</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>

        
        <el-tab-pane label="已打款" name="second">
          <el-table  v-model="pass" :data="pass"  style="width: 100%" height="450px">
            <el-table-column type="index" width="50">
            </el-table-column>
            <!-- <el-table-column label="ID">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->
            <el-table-column label="提现用户">
              <template slot-scope="scope">
                <span>{{ scope.row.iphone }}</span>
              </template>
            </el-table-column>

            <el-table-column label="vip到期时间">
              <template slot-scope="scope">
                <span v-show="scope.row.vip!=0">{{timestampToTime(scope.row.vip) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现金额">
              <template slot-scope="scope">
                <span>{{ scope.row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column label="备注信息">
              <template slot-scope="scope">
                <span>{{ scope.row.info }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现日期">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>

                    <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.status }}</span> -->
            <el-tag v-if="scope.row.status==0">待审核</el-tag>
           <el-tag type="success" v-if="scope.row.status==1">已打款</el-tag>
           <el-tag type="danger" v-if="scope.row.status==2">拒绝申请</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="审核日期">
          <template slot-scope="scope">
            <span>{{ scope.row.cashTime }}</span>
          </template>
        </el-table-column>

            <!-- <el-table-column label="操作">

              <template slot-scope="scope">
                <el-button type="text"  @click="changeRecord(scope.$index, scope.row,2)" size="small">驳回申请</el-button>
              </template>
            </el-table-column> -->

          </el-table>
        </el-tab-pane>


        <el-tab-pane label="已拒绝" name="third">
          <el-table  v-model="rej" :data="rej" style="width: 100%" height="450px">
            <el-table-column type="index" width="50">
            </el-table-column>
            <!-- <el-table-column label="ID">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->
            <el-table-column label="提现用户">
              <template slot-scope="scope">
                <span>{{ scope.row.iphone }}</span>
              </template>
            </el-table-column>

            <el-table-column label="vip到期时间">
              <template slot-scope="scope">
                <span v-show="scope.row.vip!=0">{{timestampToTime(scope.row.vip) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现金额">
              <template slot-scope="scope">
                <span>{{ scope.row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column label="备注信息">
              <template slot-scope="scope">
                <span>{{ scope.row.info }}</span>
              </template>
            </el-table-column>

            <el-table-column label="拒绝理由">
              <template slot-scope="scope">
                <span>{{ scope.row.reason }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现日期">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>



          <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.status }}</span> -->
            <el-tag v-if="scope.row.status==0">待审核</el-tag>
           <el-tag type="success" v-if="scope.row.status==1">已打款</el-tag>
           <el-tag type="danger" v-if="scope.row.status==2">拒绝申请</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="审核日期">
          <template slot-scope="scope">
            <span>{{ scope.row.cashTime }}</span>
          </template>
        </el-table-column>

            <!-- <el-table-column label="操作">

              <template slot-scope="scope">
          
                <el-button type="text"  @click="changeRecord(scope.$index, scope.row,1)" size="small">打款</el-button>
            
              </template>
            </el-table-column> -->

          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="block">
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>

      <template>
      <el-dialog title="提现明细" :visible.sync="cashRecord" width="50%" center>
        <div style="height: 450px;">
          <el-table :data="UsersCashRecoed" style="width: 100%" height="530">
            <el-table-column type="index" width="50">
            </el-table-column>

            <el-table-column label="提现日期">
              <template slot-scope="scope">
                <span>{{ scope.row.time }}</span>
              </template>
            </el-table-column>


            <el-table-column label="提现金额">
              <template slot-scope="scope">
                <span>{{ scope.row.money }}</span>
              </template>
            </el-table-column>

            <el-table-column label="提现信息">
              <template slot-scope="scope">
                <span>{{ scope.row.info }}</span>
              </template>
            </el-table-column>

            <el-table-column label="拒绝理由">
              <template slot-scope="scope">
                <span>{{ scope.row.reason }}</span>
              </template>
            </el-table-column>


            <el-table-column label="状态">
              <template slot-scope="scope">
                <!-- <span>{{ scope.row.status }}</span> -->
                <el-tag v-if="scope.row.status == 0">待审核</el-tag>
                <el-tag type="success" v-if="scope.row.status == 1">已打款</el-tag>
                <el-tag type="danger" v-if="scope.row.status == 2">拒绝申请</el-tag>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="block">
            <el-pagination @current-change="handleCurrentChange3" background layout="prev, pager, next" :total="10000">
            </el-pagination>
          </div>
        </div>



      </el-dialog>
    </template>

      <template>
        <el-dialog
          title="账号明细"
          :visible.sync="detailmoney"
          width="50%"
          center
        >
        <div style="height: 300px;">
        <el-table :data="UsersDetailMoney" height="380">
          <el-table-column type="index" width="50" >
          </el-table-column>

          <el-table-column label="用户">
            <template slot-scope="scope">
              <span>{{ scope.row.iphone }}</span>
            </template>
          </el-table-column>
  

          <el-table-column label="设备imei">
            <template slot-scope="scope">
              <span>{{ scope.row.imei}}</span>
            </template>
          </el-table-column>

          <el-table-column label="设备型号">
            <template slot-scope="scope">
              <span>{{ scope.row.model}}</span>
            </template>
          </el-table-column>

           <el-table-column label="单价">
            <template slot-scope="scope">
              <span>{{ scope.row.money}}</span>
            </template>
          </el-table-column>

          <el-table-column label="上传时间">
            <template slot-scope="scope">
              <span>{{ scope.row.time}}</span>
            </template>
          </el-table-column>
  
  
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="block">
          <el-pagination @current-change="handleCurrentChange2" background layout="prev, pager, next" :total="10000">
          </el-pagination>
        </div>
      </div>
          


        </el-dialog>
      </template>
    </template>

  </div>
</template>

<script>
export default {
  data() {
    return {
      UsersCashRecoed:[],//提现收益数据数组
      cashRecord:false,//提现详情面板
      detailuserid:"",//当前用户id明细
      cash:"",//当前提现记录
      activeName: 'first',
      UsersDetailMoney:[],
      money: "0",
      userid: "",
      data: [],
      waitcheck:[],
      rej:[],
      pass:[],
      formLabelWidth: "120px",
      newtable: {
        header: "",
        begin: "",
        end: ""
      },
      detailmoney: false,
      pagecount: 99,//查询的总数
      currentPage4: 4,
      Users: [],//用户数据数组
      req: {
        "pageIndex": 0,
        "pageCount": 200
      },
      req2: {
        "pageIndex": 0,
        "pageCount": 20
      },
      req3: {
        "pageIndex": 0,
        "pageCount": 20
      }
    };
  },

  created() {
    var that = this;
    var info = JSON.parse(localStorage.getItem("info"))
    if (info) {
      that.userid = info.userid
      console.log(info.userid);
    }
    this.selectRecord()
  },
  methods: {
    handleCurrentChange3(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req3.pageCount
        this.req3.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req3.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }
      this.getCashDetailDetail()
    },
    showCashRecord(row) {
      this.detailuserid = row.iphone
      //console.log(row);
      this.cashRecord = true
      this.getCashDetailDetail()
    },
    getCashDetailDetail() {
      var that = this;
      this.$axios.post("/api/Money/getCashRecord", {
        "userid": that.detailuserid,
        "pageIndex": that.req3.pageIndex,
        "pageCount": that.req3.pageCount,
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.UsersCashRecoed = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    },
    getDetailMoney(){
      var that = this;
      this.$axios.post("/api/Money/getMoneyRecord", {
         "userid":that.detailuserid,
        "pageIndex": that.req2.pageIndex,
        "pageCount": that.req2.pageCount,
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.UsersDetailMoney = response.data.data
            console.log(response.data.data);
          } else {
            that.$message.error(response.data.mes);
          }
        })
    },

    showDetailMoney(row){
      this.detailuserid=row.iphone
      this.detailmoney=true
      this.getDetailMoney()
    },

    timestampToTime(timestamp) {
  // 时间戳为10位需*1000，时间戳为13位不需乘1000
  var date = new Date(timestamp * 1000);
  var Y = date.getFullYear() + "-";
  var M =
    (date.getMonth() + 1 < 10
      ? "0" + (date.getMonth() + 1)
      : date.getMonth() + 1) + "-";
  var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
  var h = date.getHours() + ":";
  var m = date.getMinutes() + ":";
  var s = date.getSeconds();
  return Y + M + D + h + m + s;
},
    //提交审核状态
    open(index,row,status) {
        this.$prompt('请输入理由', '拒绝申请', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.RejRecord(value,row,status)
        }).catch(() => {   
        });
      },
    RejRecord(value,row,status) {
      //1 通过 2 拒绝
      this.cash=row
      var that = this;
      that.$axios
        .post("/api/Money/checkCashRecord", {
          iphone:row.iphone,
          cashId: row.cashId,
          money: row.money,
          status:status,
          reason:value
        })
        .then(function(response) {
          console.log(response.data);
          that.$message.success({
            message: "操作成功"
          });
          that.selectRecord() 
        })
        .catch(function(error) {
          console.log(error);
          that.$message({
            message: "操作失败"
          });
        });
    
    },



    changeRecord(index,row,status) {
      //1 通过 2 拒绝
      var that = this;
      that.$axios
        .post("/api/Money/checkCashRecord", {
          iphone:row.iphone,
          cashId: row.cashId,
          money: row.money,
          status:status
        })
        .then(function(response) {
          console.log(response.data);
          that.$message.success({
            message: "操作成功"
          });
          that.selectRecord() 
        })
        .catch(function(error) {
          console.log(error);
          that.$message({
            message: "操作失败"
          });
        });
    
    },

    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req2.pageCount
        this.req2.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req2.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }
      this.getDetailMoney()
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req.pageCount
        this.req.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }

      console.log(this.req);
      this.selectRecord()
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    dealdata(){
      
      this.waitcheck=[]
      this.rej=[]
      this.pass=[]
      for (let index = 0; index < this.data.length; index++) {
       if(this.data[index].status==0){
        this.waitcheck.push(this.data[index])
       }
       if(this.data[index].status==1){
        this.pass.push(this.data[index])
       }
       if(this.data[index].status==2){
        this.rej.push(this.data[index])
       }
        
      }
    },


    selectRecord() {
      var that = this;
      this.$axios.post("/api/Money/getCashRecord", {
        "pageIndex": that.req.pageIndex,
        "pageCount": that.req.pageCount,
      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.data = response.data.data
            that.dealdata()
          } else {
            that.$message.error(response.data.mes);
          }
        })
    },

    next(a) {
      console.log(a);
    },
    reset() {
      this.req = {
        "pageIndex": 0,//每次请求数据的开始位置
        "pageCount": 10//每次请求数据的总量
      }
    },



  }
};
</script>

<style scoped></style>
